define([], function() {
    class jp {
        constructor() {}
        init() {
                this.xr()
                this.operate()
            }
            // --------------------------------
            //渲染
        xr() {
                let cookiesid = [];
                let cookieobj = [];
                if ($.cookie('cookiesid') && $.cookie('cookieobj')) {
                    cookiesid = $.cookie('cookiesid').split(',');
                    cookieobj = JSON.parse($.cookie('cookieobj'));
                    // console.log(cookieobj)
                }
                $.ajax({
                    url: 'http://localhost/juanpi/php/juanpi.php',
                    dataType: 'json'
                }).done(function(data) {
                    // console.log(data);
                    //因为cookie中存了对象所以把数据匹配出来push到数组中在渲染
                    let dataarr = [];
                    $.each(cookiesid, function(index1, value1) {
                        $.each(data, function(index2, value2) {
                            if (value1 == value2.sid) {
                                dataarr.push(value2)
                            }
                        })
                    });
                    // console.log(dataarr);
                    // 渲染数据
                    let str = '';
                    $.each(dataarr, function(index1, value1) {
                        $.each(cookieobj[index1], function(index2, value2) {
                            let sizes = index2.split('+')[1];
                            let colors = index2.split('+')[0];
                            // console.log(sizes);
                            // console.log(colors);
                            str += `
                                        <div class="listWarp">
                                <div class="listWarp2">
                                    <!-- 列表最前面的圆圈按钮 -->
                                    <div class="butWarp">
                                        <span class="listBut circleBut" kai="off"></span>
                                    </div>
                                    <!-- 商品小图片 -->
                                    <img class="listImg" src="${value1.url}">
                                    <!-- 小标题和尺寸 -->
                                    <div class="listTitle">
                                        <strong class="commodityTitle">${value1.subtitle}</strong>
                                        <span class="measure">${sizes}，${colors}</span>
                                    </div>
                                    <!-- 单价 -->
                                    <div class="sale">￥<span class="yj">${value1.presentprice}</span><span class="originalCost">/ ￥${value1.originalprice}</span></div>
                                    <!-- +-和数量 -->
                                    <div class="countWarp">
                                        <span class="minus">-</span>
                                        <span class="count">${value2}</span>
                                        <span class="plusSign">+</span>
                                    </div>
                                    <!-- 小计 -->
                                    <div class="subtotal2">￥<span class="xj">${parseInt(value2)* parseInt(value1.presentprice)}</span></div>
                                    <!-- 删除操作 -->
                                    <div class="del">
                                        <span class="iconfont icon-lajitong"></span>
                                    </div>
                                </div>
                            </div>
                                        `
                        });
                    });
                    $('.comWarpTop').append(str);
                    let zj = 0;
                    $.each($('.xj'), function(index, value) {
                        zj += parseInt($(value).html());
                    })
                    $('.totalPrice2').html(`￥${zj}`)
                        // --------------------------------------------
                })
            }
            // ----------------------------------------
            //加减数量
        operate() {
                $('.comWarp').on('click', '.plusSign', function() {
                    // console.log($(this))
                    let num = $(this).siblings('.count').html();
                    num++;
                    $(this).siblings('.count').html(num);
                    //加减数量的时候价格变化
                    $(this).parent().siblings('.subtotal2').find('span').html((num * $('.yj').html()).toFixed(2))
                        //总价
                    let zj = 0;
                    // console.log($('.xj'))
                    $.each($('.xj'), function(index, value) {
                        // console.log(value)
                        zj += parseInt($(value).html());
                        // console.log(zj)
                    })
                    $('.totalPrice2').html(`￥${zj}`)
                });
                //减号
                $('.comWarp').on('click', '.minus', function() {
                    // console.log($(this))
                    let num = $(this).siblings('.count').html();
                    if (num > 0) {
                        num--;
                    }
                    $(this).siblings('.count').html(num);
                    $(this).parent().siblings('.subtotal2').find('span').html((num * $('.yj').html()).toFixed(2))
                    let zj = 0;
                    $.each($('.xj'), function(index, value) {
                        zj += parseInt($(value).html());
                    })
                    $('.totalPrice2').html(`￥${zj}`)
                });
                //删除
                $('.comWarp').on('click', '.icon-lajitong', function() {
                    $(this).parent().parent().parent().remove()
                    let zj = 0;
                    $.each($('.xj'), function(index, value) {
                        zj += parseInt($(value).html());
                    })
                    $('.totalPrice2').html(`￥${zj}`)
                });
                //全选按钮
                $('.checkBut').on('click', function() {
                    if ($('.checkBut').attr('kai') == 'off') {
                        $('.listBut').addClass('butcolor').attr({ 'kai': 'on' });
                        $('.checkBut').addClass('butcolor').attr({ 'kai': 'on' })
                    } else {
                        $('.listBut').removeClass('butcolor').attr({ 'kai': 'off' });
                        $('.checkBut').removeClass('butcolor').attr({ 'kai': 'off' })
                    }
                });
                // -------
                $('.comWarpTop').on('click', '.listBut', function() {
                    if ($(this).attr('kai') == 'off') {
                        $(this).addClass('butcolor').attr({ 'kai': 'on' });
                    } else {
                        $(this).removeClass('butcolor').attr({ 'kai': 'off' });
                    }
                    if ($('.listBut').attr('kai') == 'on') {
                        $('.checkBut').addClass('butcolor').attr({ 'kai': 'on' })
                    } else {
                        $('.checkBut').removeClass('butcolor').attr({ 'kai': 'off' })
                    }
                })


            }
            // ----------------------------------------------

    }
    return {
        jp: jp
    }
})